<template>
	<view style="height: 100%;">
		<view class="centent">
			<view class="navtopbox">
				<view class="navtopboxcenter">
					<view class="textinput">
						<view class="textleft">
							<text>TO：</text>
						</view>
						<picker class="xiala" mode = selector @change="bindPickerChange" :range="leaderlist" range-key="nickname">
							<view class="textright textright2">
								<input type="text" placeholder="请选择" v-model="nickname"
									disabled="true"/>
							</view>
						</picker>


					</view>
					<view class="textinput">
						<view class="textleft">
							<text>主题：</text>
						</view>
						<view class="textright">
							<input type="text" :maxlength="maxLength" placeholder="请输入主题" v-model="title" />
						</view>
					</view>
					<view class="textinput">
						<view class="textleft">
							<text>发送人：</text>
						</view>
						<view class="textright">
							<input type="text"  placeholder="请输入姓名" v-model="user_info.username" disabled="true" />
						</view>
					</view>
					<view class="zhengwen">
						<textarea maxlength="-1" class="wenziy" v-model="content" placeholder-style="color:#ccc"
							placeholder="正文" />
					</view>
					<view class="bottombtn">
						<view class="centerbtnone">
							<image src="../../static/yixuan.png" mode="" v-if="showimg" @tap="showimgchange(0)"></image>
							<image src="../../static/weixuan.png" mode="" v-if="!showimg" @tap="showimgchange(1)">
							</image>
							<text>匿名</text>
						</view>
						<view class="centerbtn" @tap="fasongyouxiang">
							<text>发送</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		data() {
			return {
				showimg: false,
				leaderlist: [					
					{
						id: 0,
						nickname: "请选择"
					}
				],
				nickname:'',
				maxLength:15,
				user_info: {},
				index: 0,
				id:0,
				if_niming:0,
				title:'',
				content:'',
				array:0,
				area:"",
				province:"",
				if_school:0,
				city:"",
				showfasong:true
				
				
			}
		},
		methods: {
			bindPickerChange: function(e) {			
				this.index = e.target.value //将数组改变索引赋给定义的index变量
				this.id = this.leaderlist[this.index].group_id
				this.area = this.leaderlist[this.index].area
				this.city = this.leaderlist[this.index].city
				this.if_school = this.leaderlist[this.index].if_school
				this.province = this.leaderlist[this.index].province
			    this.nickname =  this.leaderlist[this.index].nickname
				console.log(this.id)
			},

			showimgchange(e) {
				console.log(e)
				this.if_niming = e
				this.showimg = !this.showimg
			},
			useremaillist(school_id) {
				this.$store
					.dispatch('useremaillist', {
						openid: this.userInfo.openid,
						token: this.userInfo.token,
						school_id : school_id
					})
					.then(res => {
						this.id = res.data.data.leaderlist[0].group_id
						this.area = res.data.data.leaderlist[0].area
						this.city = res.data.data.leaderlist[0].city
						this.if_school = res.data.data.leaderlist[0].if_school
						this.province = res.data.data.leaderlist[0].province
						this.leaderlist = res.data.data.leaderlist						
						this.user_info = res.data.data.user_info																	
					});
			},						
			fasongyouxiang(){
				
			 if(this.nickname == ""){
					uni.showModal({
						title: '友情提示',
						content: '请选择发送对象',
						showCancel: false,
						cancelText: '',
						confirmText: '确认',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				
			}else if(this.title == ""){
					uni.showModal({
						title: '友情提示',
						content: '请填写主题',
						showCancel: false,
						cancelText: '',
						confirmText: '确认',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else if(this.content == ""){
					uni.showModal({
						title: '友情提示',
						content: '请填写正文内容',
						showCancel: false,
						cancelText: '',
						confirmText: '确认',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if(this.user_info.username==""){
					uni.showModal({
						title: '友情提示',
						content: '发送人不能为空',
						showCancel: false,
						cancelText: '',
						confirmText: '确认',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else{					
					if(this.showfasong){
						this.showfasong = false;
						this.$store
							.dispatch('fasongyouxiang', {							
								token: this.userInfo.token,
								content: this.content,
								if_niming:this.if_niming,
								leader_id:this.id,						
								openid: this.userInfo.openid,
								title:this.title,
								index:this.array,
								area:this.area,
								city:this.city,
								if_school:this.if_school,
								province:this.province																										
							})
							.then(res => {
								console.log(res)
								if(res.data.code==1){									
									uni.showToast({
										title: '发送成功',
										icon: "none"
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1000)
									
								}			
								
																																		
							});			
					}
					
				}
				
			}

		},
		onLoad(data) {
			this.useremaillist(data.school_id)
			this.array = uni.getStorageSync("def");
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
		background-color: #f4f4f4;
		box-sizing: border-box;

	}

	.centent {
		background-image: url(../../static/keding.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;

		.navtopbox {
			width: 100%;
			height: 100%;
			// background-color: #222222;
			padding: 20rpx;
			box-sizing: border-box;

			.navtopboxcenter {
				position: relative;
				width: 100%;
				height: 100%;
				background-color: #fff;
				box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				border-radius: 15rpx;
				overflow: hidden;
				padding: 60rpx 20rpx 20rpx 20rpx;
				box-sizing: border-box;

				.textinput {
					height: 100rpx;
					display: flex;
					.xiala {
						width: 100%;
					}

					.textleft {
						height: 100%;
						width: 180rpx;
						line-height: 160rpx;
						text-align: center;
						color: #000;
						font-size: 28rpx;
						font-weight: bold;
						margin-right: 10rpx;

					}

					.textright {
						box-sizing: border-box;
						height: 100%;
						width: 100%;
						border-bottom: 1px solid #ccc;

						input {
							box-sizing: border-box;
							padding-left: 30rpx;
							height: 100%;
							font-size: 24rpx;
							padding-top: 50rpx;
						}
					}
				}

				.zhengwen {
					margin-top: 30rpx;

					.wenziy {
						width: 100%;
						height: 600rpx
					}
				}

				.bottombtn {
					position: fixed;
					bottom: 50rpx;
					left: 0;
					width: 100%;
					height: 120rpx;
					padding: 20rpx;
					box-sizing: border-box;
					display: flex;

					.centerbtnone {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 180rpx;
						height: 100%;
						font-size: 22rpx;

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.centerbtn {
						width: 72%;
						height: 100%;
						background-image: linear-gradient(to right, #0a98f7, #23c3f3);
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 34rpx;
					}

				}

			}
		}


	}
</style>
